<template>
	<view class="cart-index" :style="[{paddingTop:statusBar+ 'px'}]">
			<view class="status" :style="[{height:statusBar+ 'px'}]" ></view>
			<view class="navigation" :style="[{top:statusBar+ 'px'}]">
				<image src="/static/images/back.png" class="back" @click="back()" mode=""></image>
				<view class="navigation-title">购物车</view>
			</view>
			<view class="navigation-position"></view>
	  <view class="content">
		   
		   <uni-swipe-action-item  :right-options="options"  v-for="(item,index) in pageItems" :key="index" @click="removeCart(item.id)" :auto-close="autoClose" class="cart-item">
				<view class="cart-content">
					<view class="checkbox" @click="checkWaitingHandleItem(index)">
						<view class="checked"  v-if="item.checked&&item.checked">
							<image src="/static/images/choicedicon.png" mode=""></image>
						</view>
						<view class="uncheck" v-else></view>
					<!-- 	<view class="uncheck" ></view> -->
					</view>
					<view class="cart-product">
						<image :src ="item.sku.pic_url" mode ="" class="cart-rpoduct-image"></image>
						<view class="title">{{item.product.title}}</view>
						<view class="money">￥{{item.sku.price_vip}}</view>
						<view class="change-number">
							<product-selected-no-sku-count-com :item="item"  @removeCart="removeCart" @updateCartProduct="updateCartProduct"></product-selected-no-sku-count-com>
						</view>
						
					</view>
				</view>
			</uni-swipe-action-item>
		
		<view class="settlement-bar" v-if="pageItems.length>0">
			<view class="check-all" @click="onSelectAllWaitingHandle()" >
				<view class="check-all-box">
					<view class="checked-all" v-if="isWaitingAllChecked">
						<image src="/static/images/choicedicon.png" mode=""></image>
					</view>
					<view class="unchecked-all" v-else></view>	
				</view>
				<view class="check-all-text" v-if="!isWaitingAllChecked">全选</view>	
				<view class="check-all-text" v-else>已选({{ pageItems.length }})</view>	
				
			</view>
			
			<view class="show-total-money" v-if="totalMoney >0">
				合计：¥ {{totalMoney}}
			</view>	
			<view class="settlement-pay">
				<view class="settlement-pay-btn" @click="orderConfirm()" >提交订单</view>	
			</view>	
		</view>
	  </view>
	</view>
</template>

<script>
import _ from 'lodash'
import store from 'store'
import { mapGetters, mapActions } from 'vuex'
import { getCarts ,deleteCart , updateCart } from "api/cartApi.js";
import ProductSelectedNoSkuCountCom from "components/product/purchase/ProductSelectedNoSkuCountCom";
import Skeleton from "mixins/Skeleton";
import AuthChecking from "mixins/AuthChecking";
import SkeletonMineCom from "skeletons/SkeletonMineCom";

export default {
  name: "cart",
  store,
  mixins: [
  	Skeleton,
  	AuthChecking
  ],
  components: {
  	ProductSelectedNoSkuCountCom,
	SkeletonMineCom
  },
  computed: {
    ...mapGetters([
			'statusBar',
			'user',
			'isLogin'
    ])
  },
  data(){
  	return {
  		pageItems: [],
		isWaitingAllChecked:false,
		records:[],
		totalMoney:0,
		options:[
			{
				text: '删除',
				style: {
					backgroundColor: '#D84C29'
				}
			}
		],
		autoClose:false
	}
  },
  methods: {
    ...mapActions([
    ]),
	back(){
		uni.navigateBack()
	},
    remove(id) {
      uni.showModal({
        title: '提示',
        content: '确定从购物车删除当前商品吗？',
        success: async (res) => {
          if (res.confirm) {
            await deleteCart(id)
            let carts = this.pageItems
            _.remove(carts, (cart) => {
              return cart.id === id
            })
			this.pageItems = [];
			this.pageItems = carts;
			this.countTotalMoney();
           /* await this.updateUserAddresses([])
            await this.updateUserAddresses(addresses) */
            uni.showToast({title: '商品已删除', duration: 2000, icon: 'success'})
          }
        }
      })
    },
	removeCart(id){
		this.remove(id);
	},
	async updateCartProduct(param){
		 await updateCart(param);
		this.countTotalMoney();
	},
    goToAddressForm(id = null) {
      if (id) {
        uni.navigateTo({url: `/packs/pages/address/form?id=${id}`})
      } else {
        uni.navigateTo({url: `/packs/pages/address/form`})
      }
    },
	getCarts(){
		getCarts().then(res=>{
			if(!res.message){
				this.pageItems = res;
			}
		})
	},
	onSelectAllWaitingHandle(){ //待处理全选
		this.records = []
		if(this.isWaitingAllChecked){
			this.isWaitingAllChecked = false
		}else{
			this.isWaitingAllChecked = true
		}
		let list = this.pageItems;
		list.forEach((item,index)=>{
			if(this.isWaitingAllChecked){
					item.checked = true
					this.records.push(this.pageItems[index])
			}else{
				item.checked = false
			}
		})
		this.pageItems = list;
		this.countTotalMoney()
		this.$forceUpdate()
	},
	checkWaitingHandleItem(index){ //待处理单选
		
		if(this.pageItems[index].checked){
			this.$set(this.pageItems[index], 'checked', false)
			let list = this.records;
			list.forEach((ele,idx)=>{
				if(ele==this.pageItems[index].cid){
					list.splice(idx,1)
				}
			})
			this.records = list;
		}else{
			this.$set(this.pageItems[index], 'checked', true)
			this.records.push(this.pageItems[index])
		}
		let length = this.records.length;
		if(length == this.pageItems.length){
			this.isWaitingAllChecked = true
		}else{
			this.isWaitingAllChecked = false
		}
		this.countTotalMoney()
		this.$forceUpdate()
	},
	countTotalMoney(){ //计算价格
		let list = this.pageItems;
		let totalMoney = 0;
		for(let item of list){
			if(item.checked){
				totalMoney += Number(item.sku.price_vip) * item.number
			}
		}
		this.totalMoney = totalMoney.toFixed(2);
	},
    async chooseAddressForOrder(address = {}) {
      if (this.isAddressChosenForOrder) {
        await this.updateCurrentAddress(address)
        // uni.navigateTo({url: `/packs/pages/order/confirm`})
				uni.navigateBack({})
      }
    },
	async orderConfirm(){ //批量提交订单
		
		if(this.records.length!=0){
			uni.navigateTo({
				url:'/packs/pages/order/confirm?records=' + encodeURIComponent(JSON.stringify(this.records))
			})
		}else{
			this.isAllChecked = false
			this.isWaitingAllChecked = false
			uni.showModal({
				title:'提示',
				content:'请选择加入订单的商品！',
				confirmColor:'#FF6011',
				confirmText:'我知道了',
				showCancel:false
			})
		}
	}
  },
 
  
	async onShow (){
		console.log()
		if(await this.isLogin){
			
			this.getCarts()
		}
	}
}
</script>

<style lang="scss" scoped>
page{
		background: #F6F6F6;
	}
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:999;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.cart-content{
		margin:0rpx auto;
		width:718rpx;
		height:252rpx;
		border-raidus:10rpx;
		background:#fff;
		overflow: hidden;
	}
	.checkbox{
		width: 32rpx;
		height: 32rpx;
		float:left;
		margin: 102rpx 12rpx 0 24rpx;
	}
	.uncheck{
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #CCCCCC;
	}
	.checked{
		width:32rpx;
		height: 32rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		>image{
			display: block;
			width:100%;
			height:100%;
			border-radius: 50%;
		}
	}
	.cart-item{
		margin-top:16rpx;
	}
	.cart-product{
		margin-top:26rpx;
		overflow:hidden;
		position:relative;
		margin-left:14rpx;
		.title{
			width:440rpx;
			margin-left:20rpx;
			float:left;
			font-size:30rpx;
			color:#000;
			margin-top:15rpx;
		}
	}
	.cart-rpoduct-image{
		width:190rpx;
		height:190rpx;
		float:left;
	}
	.money{
		position: absolute;
		bottom: 0;
		left: 106px;
	}
	.change-number{
		position: absolute;
		bottom: 0;
		right: 20px;
	}
	
	.settlement-bar{
		width: 100%;
		height: 100rpx;
		position: fixed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		left:0;
		bottom: 0;
		background: #ffffff;
		padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>11.2/
	}
	.check-all{
		display: flex;
		align-items: center;
	}
	.check-all-box{
		width: 42rpx;
		height: 42rpx;
		border-radius: 50%;
		// border:2rpx solid #CCCCCC;
		margin:0 10rpx 0 30rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.checked-all{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		position: absolute;
		left:0;
		top:0;
		display: flex;
		align-items: center;
		justify-content: center;
		>image{
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	.unchecked-all{
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border:2rpx solid #CCCCCC;
		position: absolute;
		left:0;
		top:0;
	}
	.check-all-text{
		font-size: 24rpx;
		color: #999999;
	}
	.settlement-pay-money{
		>view:nth-child(1){
			display: flex;
			font-size: 24rpx;
			// >text:nth-child(1){
			// 	font-size: 24rpx;
			// 	font-weight: 400;
			// 	color: #333333;
			// 	margin-top: 12rpx;
			// }
			// >text:nth-child(2){
			// 	font-size: 24rpx;
			// 	font-weight: 400;
			// 	color: #FF4924;
			// 	margin-top: 10rpx;
			// }
			// >text:nth-child(3){
			// 	font-size: 40rpx;
			// 	font-weight: 400;
			// 	color: #FF4924;
			// }
			
			>text:nth-child(1){
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				margin-top: 12rpx;
				margin-top: 6rpx;
			}
			>text:nth-child(2){
				font-size: 24rpx;
				font-weight: 400;
				color: #FF4924;
				margin-top: 6rpx;
			}
			>text:nth-child(3){
				font-size: 32rpx;
				font-weight: 400;
				color: #FF4924;
			}
		}
		>view:nth-child(2){
			display: flex;
			font-size: 24rpx;
			// >text:nth-child(1){
			// 	font-size: 24rpx;
			// 	font-weight: 400;
			// 	color: #333333;
			// 	margin-top: 12rpx;
			// }
			// >text:nth-child(2){
			// 	font-size: 24rpx;
			// 	font-weight: 400;
			// 	color: #FF4924;
			// 	margin-top: 10rpx;
			// }
			// >text:nth-child(3){
			// 	font-size: 40rpx;
			// 	font-weight: 400;
			// 	color: #FF4924;
			// }
			
			>text:nth-child(1){
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				margin-top: 12rpx;
				margin-top: 6rpx;
			}
			>text:nth-child(2){
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				margin-top: 6rpx;
			}
			>text:nth-child(3){
				font-size: 32rpx;
				font-weight: 400;
				color: #999999;
			}
		}
		
	}
	.settlement-pay{
		display: flex;
		align-items: center;
	}
	.settlement-pay-btn{
		width: 172rpx;
		height: 50rpx;
		line-height:50rpx;
		background: #D84C29;
		color:#fff;
		border-radius: 4rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content:center;
		margin: 0 24rpx 0 24rpx;
	}
	.show-total-money{
		color:#333;
		font-size:30rpx;
	}
</style>
